<template>
  <!-- 最外面的容器 -->
  <div class="container">
    <!-- 顶部固定栏 -->
    <div class="top">
      <!-- 左侧的logo -->
      <div class="logo" @click="toHome">
        <img
          class="image"
          src="https://imagev2.xmcdn.com/storages/3777-audiofreehighqps/49/07/GMCoOSMH3Kb7AAAPQgH_va2X.png"
          alt=""
        />
      </div>
      <!-- 中间的搜索框 -->
      <div class="input" @click="toSearch">
        <van-search
          v-model="value"
          placeholder="请输入搜索关键词"
          shape="round"
        />
      </div>
      <!-- 右侧button -->
      <div class="button">
        <van-button plain round color="red" type="primary" size="small"
          >打开APP</van-button
        >
      </div>
    </div>

    <!-- 中间的部分 -->
    <div class="main">
      <!-- 左边的一级分类 -->
      <div class="left" ref="left">
        <div
          @click="change(index)"
          class="item_category_header"
          v-for="(item, index) in categoryData"
          :key="index"
          :class="index == currentIndex ? 'active' : ''"
        >
          {{ item.title }}
        </div>
      </div>
      <!-- 右边的二级分类显示 -->
      <div class="right"
      @scroll="chanegScroll" 
      ref="top"
      @click="changeIsScroll"
      >
        <div
          class="item"
          v-for="(item1, index) in categoryData"
          ref="samlldivHeight"
        >
          <!-- 上半部分一级分类介绍 -->
          <div class="top_cate" @click="toList(item1.id, item1.title)">
            {{ item1.title }}
          </div>
          <!-- 下半部分二级分类介绍 -->
          <div class="bottom">
            <div
              class="item_cate"
              v-for="(item, index) in item1.subCategories[0]?.metadataValues"
              @click="
                toListCategory2(item1.id, item.id, item1.title, item.name)
              "
            >
              {{ item.name }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router";
// 引入周期函数
import { onMounted } from "vue";
// 引入api
import { reqCate } from "@/api/category/index";
import { ref } from "vue";

defineOptions({
  name: "Category",
});

// 控制左侧是否高亮
const currentIndex = ref<any>(0);
const samlldivHeight = ref();
const top = ref<any>();
const left = ref<any>();
//存储一级分类与二级分类的数据
const categoryData = ref<any>([]);
const isScroll = ref<boolean>(true);
onMounted(() => {
  // 组件挂载获取到一级与二级分类
  getCategory();
});

// 获取分类的数据
const getCategory = async () => {
  let result = await reqCate();
  // console.log(result);
  categoryData.value = result.data;
};
const router = useRouter();

const toList = (id1: any, name: any) => {
  router.push({ name: "Category-list", params: { flag: 1 } }); // 替换成你想要导航的目标路由路径
  localStorage.setItem("id1", id1);
  localStorage.setItem("name", name);
};

// 跳转回首页
const toHome = () => {
  router.push({ name: "Home" });
};
// 挑战搜索页面
const toSearch = () => {
  router.push({ name: "Search" });
};
const toListCategory2 = (id1: any, id2: any, name: any, name1: any) => {
  // 点击二级跳转
  // console.log(id1,id2);
  router.push({ name: "Category-list" }); // 替换成你想要导航的目标路由路径
  localStorage.setItem("id1", id1);
  localStorage.setItem("name", name + "," + name1);
  localStorage.setItem("id2", id2);
};

// 监听右边二级分类的滚动条触发
const chanegScroll = (event: any) => {
  if (isScroll.value) {
    // console.log("触发了");
    let sum = 0;
    for (let i = 0; i < 17; i++) {
      sum += samlldivHeight.value[i].clientHeight;
      if (event.target.scrollTop > sum) {
        left.value.scrollTop = 50 * (i - 1);
        // console.log(i);
        currentIndex.value = i;
      }
    }
  }
};
// 监听左侧的滚动条
// const chanegScrollLeft = (event: any) => {
//   // console.log(event.target.scrollTop);
// };

// 点击左侧的一级分类
const change = (index: any) => {
  // 左边的index是从0开始
  isScroll.value=false;
  // 右边的id是从2开始，
  localStorage.setItem("ch", "1");
  console.log(index);
  // top.value.scrollTop
  top.value.scrollTop = samlldivHeight.value[index].offsetTop;

  currentIndex.value = index;
  console.log(currentIndex.value);
};

// 点击右侧的大盒子
const changeIsScroll=()=>{
  isScroll.value=true;
}
</script>

<style scoped lang="less">
// 容器
.container {
  width: 100%;
  position: relative;
  // 顶部部分
  .top {
    position: fixed;
    background-color: #fff;
    z-index: 99;
    top: 0px;
    height: 60px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 0 10px;
    box-sizing: border-box;
    border-radius: 2px;
    border-bottom: 6px solid #f0f0f0;
    // 左侧的Logo样式
    .logo {
      width: 23%;
      margin: 0 auto;
      .image {
        width: 100%;
      }
    }
    // 中间的搜索框的样式
    .input {
      background-color: #eee;
      width: 50%;
      margin-left: 0px;
      padding-left: 0px;
    }
  }
  // 中间内容区域
  .main {
    position: absolute;
    z-index: 2;
    display: flex;
    top: 62px;
    width: 100%;
    height: 607px;
    .left {
      width: 25%;
      display: flex;
      height: 100%;
      overflow: auto;
      flex-direction: column;
      .item_category_header {
        font-size: 14px;
        color: #72727b;
        height: 50px;
        line-height: 50px;
        text-align: center;
        border-bottom: 2px solid #f0f0f0;
      }
    }
    // 右边的二级分类
    .right {
      overflow: auto;
      width: 80%;
      // border: 2px solid green;
      padding-left: 10px;
      // 二级分类下方的一个item，包括一级以及二级
      .item {
        display: flex;
        flex-direction: column;
        justify-content: space-around;

        // 顶部一级分类的介绍
        .top_cate {
          height: 50px;
          line-height: 50px;
          font-size: 14px;
          color: #40404c;
          font-weight: 600;
          border-bottom: 2px solid #eee;
          padding-left: 7.5px;
        }
        // 对应底部的二级分类
        .bottom {
          display: flex;
          flex-wrap: wrap;
          .item_cate {
            font-size: 14px;
            line-height: 20px;
            padding: 7.5px;
            color: #72727b;
            white-space: nowrap;
            display: inline-block;
          }
        }
      }
    }
  }
}
</style>
<style scoped lang="less">
.active {
  border-left: 5px solid red;
}
</style>
